import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
// 引入自定义http对象
import http from '../../http';
// 引入首页样式文件
import '../../assets/css/homeMain.scss'

class HomeMain extends Component {
	constructor(props) {
		super(props);
		this.state = {
			countData: {
				// 用户总数
				userCount: null,
				// 商品总数
				productCount: null,
				// 订单总数
				orderCount: null
			}
		}
	}

	// 组件挂载完成之后
	componentDidMount() {
		// 获取首页显示的对应的用户、商品、订单数量
		http.getBaseCount().then(res => {
			this.setState({
				countData: res.data
			})
		})
	}

	render() {
		return (
			<div className="home-main">
				<div className="home-title">首页</div>
				<div className="home-main-countlist">
					<div className="home-main-item brown">
						<NavLink to="/user">
							{/*显示用户数量，如果没有数量显示三个点*/}
							<div>{this.state.countData.userCount || '···'}</div>
							<div>
								<i className="fa fa-user-o fa-fw"/>
								<span>用户总数</span>
							</div>
						</NavLink>
					</div>
					<div className="home-main-item green">
						<NavLink to="/product">
							{/*显示商品数量，如果没有数量显示三个点*/}
							<div>{this.state.countData.productCount || '···'}</div>
							<div>
								<i className="fa fa-list fa-fw"/>
								<span>商品总数</span>
							</div>
						</NavLink>
					</div>
					<div className="home-main-item blue">
						<NavLink to="/order">
							{/*显示订单数量，如果没有数量显示三个点*/}
							<div>{this.state.countData.orderCount || '···'}</div>
							<div>
								<i className="fa fa-check-square-o fa-fw"/>
								<span>订单总数</span>
							</div>
						</NavLink>
					</div>
				</div>
			</div>
		);
	}
}

export default HomeMain;